<template>
<div class="viduesmin">
  <app-scroll class="content">
    <div>
      <ul>
        <li v-for="item in vmin" :key="item.id">
          <video id="video" ref="video" loop controls width="100%">
              <source :src="item.video.url" type="video/mp4"/>
          </video>
          <img :src="item.video.imgUrl" alt="" class="tupian">
          <div class="title">
            {{item.title}}
          </div>
          <div class="bottom">
            <img :src="item.user.avatarurl" alt="">
            <h1>{{item.user.nickName}}</h1>
            <span class="iconfont icon-dianzan1"></span>
            <h2>{{item.upCount}}</h2>
          </div>
        </li>
      </ul>
    </div>
  </app-scroll>
</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed:{
    ...mapState({
      vmin:state=>state.viduesmin.vmin
    })
  },
  watch:{
    vmin(val){
      // console.log(val);
    }
  },
  created(){
    this.$store.dispatch('viduesmin/requestViduesMin')
  }
}
</script>

<style lang='scss' scoped>
.viduesmin{
  width: 100%;
  height: calc(100% - 100px);
  .content{
    width: 100%;
    height: 100%;
    ul{
      display: flex;
      flex-wrap: wrap;
      li{
        width: 185px;
        height: 300px;
        margin: 0 1.875px 2px 0;
        position: relative;
        #video{
          width: 185px;
          height: 300px;
        }
        .tupian{
          // width: 185px;
          height: 300px;
          position: absolute;
          top: 0;
          left: 0;
        }
        .title{
          position: absolute;
          top: 220px;
          left: 0px;
          color: #ffffff;
          font-size: 15px;
          margin: 0 8px;
          height: 42px;
          line-height: 21px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .bottom{
          position: absolute;
          left: 0;
          bottom: 8px;
          margin: 0 8px;
          display: flex;
          color: #ffffff;
          align-items: center;
          justify-content: center;
          img{
            width: 21.5px;
            height: 21.5px;
            border-radius: 50%;
          }
          h1{
            width: 78.5px;
            height: 19px;
            font-size: 13px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          span{
            margin-left: 30px;
          }
        }
      }
    }
    }
    
}

</style>